<!DOCTYPE html>
<html lang="en" style="width:100%; height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>WebSSH</title>
    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script>
     &lt;!&ndash; import JavaScript &ndash;&gt;
     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
     &lt;!&ndash; 引入样式 &ndash;&gt;
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/vue.js"></script>
    <!-- element -->
    <script src="../js/index.js"></script>
    <script src="../js/jsencrypt.min.js"></script>
    <script>
        function showvcode() {
            document.getElementById('checkImg').src = '[[@{/}]]' + 'getcaptcha.sl?temp=' + (new Date().getTime().toString());

        }
    </script>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }
        .inner{
            border: 5px solid rgba(255,255,255,0.5);
            border-radius: 10px;
            width: 400px;
            height: 530px;
            position: absolute;
            top: 40%;
            left: 76%;
            transform: translate(-50%,-50%);
            box-shadow:11px 11px 11px rgba(50,50,50,1);	///边框阴影
        }
        .grid-content {
            display:table;
	        margin:0 auto;
	        width:100%;
	        height: 5%;
	        opacity:1;
	        /*background:#6caef5;#E4007F */
	        /*background: -webkit-gradient(linear, 70% 0%, 100% 0%, from(#6caef5), to(#ffff00));*/
	        background: -webkit-gradient(linear, 70% 0%, 100% 0%, from(#292421), to(#E4007F));
	        font: "Microsoft YaHei";
	        color: #ffffff;
	        font-size: 20px;
	        font-weight:500;
	        text-shadow:4px 4px 4px rgba(88,88,88,.2);
	        text-align: center;
	        /*position:absolute;*/
	        line-height: 20px;
        }
        .outer{
            height: 95%;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body style="background:url('/jpg/1.jpg') no-repeat;background-size:cover;background-position:center;width:100%; height: 98%;margin:0;'">
<div class="grid-content" >
    <div style="display: table-cell;vertical-align:middle;">企业私有云  在线ssh连接服务器</div>
</div>
<div class="outer">
<div id="app" class="inner">
    <el-row>
        <el-col :span="24">

        </el-col>
    </el-row>
    <div style="display: table-cell;vertical-align:middle; font: 'Microsoft YaHei';font-size: 20px;font-weight:500;text-align: center;width:400px;color: #cecece;">登录服务器</div>
    <div style="margin: 20px;"></div>
    <el-form :label-position="labelPosition" label-width="80px" :model="connectData">
        <el-form-item label="主机">
            <el-input placeholder="请输入主机IP" v-model="connectData.host" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="端口">
            <el-input placeholder="请输入端口号" v-model="connectData.port" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="账号">
            <el-input placeholder="请输入账号" v-model="connectData.username" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
        <img th:src="@{/getcaptcha.sl?temp=}+ ${time1}" alt="验证码" id="checkImg"
             style="position:relative; top:10px; left:1px;width:28%;hight:100%;" onClick="showvcode()"/>
            <el-input placeholder="请输入验证码" v-model="connectData.vcode" style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="connectData.password" show-password
                      @keyup.enter.native="onSubmit" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="连接方式">
        <template>
            <el-radio v-model="type" label="1">ssh</el-radio>
            <el-radio v-model="type" label="2">sftp</el-radio>
        </template>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">连接</el-button>
            <el-button @click="reset">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</div>
<script>

    var Main = {
        data() {
            return {
                labelPosition: 'right',
                type: '1',
                connectData: {
                    operate: 'connect',
                    host: '',
                    port: '22',
                    username: '',
                    password: '',
                    height: screen.availHeight,
                    width: screen.availWidth
                }
            };
        },
        methods: {
            onSubmit: function () {
                console.log('submit!');
                var publickey;
                var pass = this.connectData.password;
                $.ajax({
                        url: 'publickey',
                        type: 'post',
                        data: (new Date().getTime().toString()),
                        dataType: 'text',
                        async: false,
                        success: function (result) {
                        publickey = result;
                        }
                      });
                Encrypt = new JSEncrypt();
                Encrypt.setPublicKey(publickey);
                this.connectData.password=Encrypt.encrypt(pass);
                var storage = window.localStorage;
                storage.setItem("connectData", JSON.stringify(this.connectData));
                if(this.type == '1'){
                    window.location.href = '/websshpage';
                }else {
                    window.location.href = '/sftp';
                }

            },
            reset: function () {
                this.connectData.host = '';
                this.connectData.username = '';
                this.connectData.password = '';
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')


</script>
</body>
</html>